<template>
  <el-dialog title="查看" :visible.sync="dialog" width="60%" :close-on-click-modal="false" close-on-press-escape
    @close="dialogClose">
    <div id="printMe">
      <!-- <div class="number">编号：{{ obj.serialNumber }}</div> -->
      <div class="title">动火作业许可证</div>
      <table>
        <tr>
          <td>编号</td>
          <td>{{ obj.serialNumber }}</td>
          <td>流水号</td>
          <td>{{ obj.singleNumber }}</td>
        </tr>
        <tr>
          <td>申请动火单位</td>
          <td>{{ obj.applyHotUnit }}</td>
          <td>动火施工单位</td>
          <td>{{ obj.hotConstructionUnit }}</td>
        </tr>
        <tr>
          <td>动火级别</td>
          <td>{{ obj.hotLevel }}</td>
          <td>动火地点</td>
          <td>{{ obj.hotPlace }}</td>
        </tr>
        <tr>
          <td>动火时间</td>
          <td>{{ obj.hotTime | dateFormat("YYYY-MM-DD HH:mm:ss") }}</td>
          <td>动火内介质</td>
          <td>{{ obj.hotInnerMedium }}</td>
        </tr>
        <tr>
          <td>动火部位</td>
          <td colspan="3">{{ obj.hotPart }}</td>
        </tr>
        <tr>
          <td>动火原因</td>
          <td colspan="3">{{ obj.hotReason }}</td>
        </tr>
        <tr>
          <td>动火作业主要人员</td>
          <td colspan="3">{{ obj.hotWorkUser }}</td>
        </tr>
        <tr>
          <td>动火方案是否审批：{{ obj.isApproval ? "是" : "否" }}</td>
          <td colspan="3">
            <div>其他附件（危害识别等）</div>
            <file-type :files="obj.otherFileUrl" />
          </td>
        </tr>
        <tr>
          <td>是否附图纸：{{ obj.isDrawing ? "是" : "否" }}</td>
          <td colspan="3">
            <div>图纸说明</div>
            <file-type :files="obj.drawingUrl" />
          </td>
        </tr>
        <tr>
          <td>有效期</td>
          <td colspan="3">
            从 {{ obj.startTime | dateFormat("YYYY 年 MM 月 DD 日 HH 时 mm 分") }} 到
            {{ obj.endTime | dateFormat("YYYY 年 MM 月 DD 日 HH 时 mm 分") }}
          </td>
        </tr>
        <tr>
          <td colspan="4">
            <div>动火作业类型：</div>
            <el-checkbox-group v-if="obj.hotWorkType && obj.hotWorkType.length > 0" v-model="obj.hotWorkType">
              <el-checkbox v-for="item in hotWorkTypeData" :key="item.code" disabled :label="item.code">{{ item.name }}
              </el-checkbox>
            </el-checkbox-group>
          </td>
        </tr>
        <tr>
          <td colspan="4">
            <div>可能产生的危害：</div>
            <el-checkbox-group v-if="obj.harmType && obj.harmType.length > 0" v-model="obj.harmType">
              <el-checkbox v-for="item in possibleHazardsData" :key="item.code" disabled :label="item.code">
                {{ item.name }}</el-checkbox>
            </el-checkbox-group>
          </td>
        </tr>
        <tr>
          <td colspan="4">
            <div>相关许可落实情况：</div>
            <el-checkbox-group v-if="obj.licenseImplement && obj.licenseImplement.length > 0"
              v-model="obj.licenseImplement">
              <el-checkbox v-for="item in implementationData" :key="item.code" disabled :label="item.code">
                {{ item.name }}</el-checkbox>
            </el-checkbox-group>
            <div>是否开展JSA分析：{{ obj.isJsa ? "是" : "否" }}</div>
            <div>相关说明：{{ obj.jsaDescribe }}</div>
            <div>JSA分析列表及管控措施：（附表）</div>
            <file-type :files="obj.jsaAnalysis" />
          </td>
        </tr>
        <tr>
          <td colspan="4">
            <div>安全措施：</div>
            <el-checkbox-group v-if="obj.safetyType && obj.safetyType.length > 0" v-model="obj.safetyType">
              <el-checkbox v-for="item in safetyMeasuresData" :key="item.code" disabled :label="item.code">
                {{ item.name }}</el-checkbox>
            </el-checkbox-group>
          </td>
        </tr>
      </table>
      <table class="hot-gas-detect">
        <tr>
          <td>测试时间</td>
          <td v-for="(item, index) in obj.hotGasDetectList" :key="'测试时间' + index">
            {{ item.testTime | dateFormat("YYYY 年 MM 月 DD 日 HH 时 mm 分") }}
          </td>
          <td v-for="(item, index) in 6 - obj.hotGasDetectList.length" :key="index" />
        </tr>
        <tr>
          <td>测试位置</td>
          <td v-for="(item, index) in obj.hotGasDetectList" :key="'测试位置' + index">{{ item.testPlace }}</td>
          <td v-for="(item, index) in 6 - obj.hotGasDetectList.length" :key="index" />
        </tr>
        <tr>
          <td>氧气测试浓度%</td>
          <td v-for="(item, index) in obj.hotGasDetectList" :key="'氧气测试浓度' + index">{{ item.oxygen }}</td>
          <td v-for="(item, index) in 6 - obj.hotGasDetectList.length" :key="index" />
        </tr>
        <tr>
          <td>可燃气体浓度LEL%</td>
          <td v-for="(item, index) in obj.hotGasDetectList" :key="'可燃气体浓度LEL' + index">{{ item.flammableGas }}</td>
          <td v-for="(item, index) in 6 - obj.hotGasDetectList.length" :key="index" />
        </tr>
        <tr>
          <td>有毒气体浓度%</td>
          <td v-for="(item, index) in obj.hotGasDetectList" :key="'有毒气体浓度' + index">{{ item.toxicGas }}</td>
          <td v-for="(item, index) in 6 - obj.hotGasDetectList.length" :key="index" />
        </tr>
      </table>
      <table>
        <tr>
          <td colspan="5">
            <div>本人确认工作开始前气体检测已合格。</div>
            <div>
              <span style="padding-right:50px">检测人（动火作业单位监护人）：{{ obj.gasInspectorName }}</span>
              <span>确认人（属地单位监护人）：{{ obj.gasConfirmUserName }}</span>
            </div>
          </td>
        </tr>
        <tr>
          <td colspan="5">
            <div>
              注明作业过程中气体测试要求（位置、频次等）：（当气体检测表格不够填时可按本许可证内容、格式另附气体检测表格，须在此处说明）
            </div>
            <div>{{ obj.gasTestRequire }}</div>
          </td>
        </tr>
        <tr>
          <td>安全监护人</td>
          <td colspan="4">
            <div>本人已阅读许可并且确信所以条件都满足，并承诺坚守现场。</div>
            <div>
              <span>现场所有安全监护人：{{ obj.safetyUsername }}</span>
              <span v-if="obj.safetyApproval"
                style="padding-left: 50px">{{ obj.safetyApproval.approvalTime | dateFormat("YYYY 年 MM 月 DD 日 HH 时 mm 分") }}</span>
              <span v-else />
            </div>
          </td>
        </tr>
        <tr>
          <td>相关方</td>
          <td colspan="4">
            <div>本人确认收到许可证，了解工作对本单位的影响，将安排人员对此项工作给予关注，并和相关各方保持联系。</div>
            <div>
              <span>确认人： {{ obj.relatedUsername }}</span>
            </div>
          </td>
        </tr>
        <tr>
          <td colspan="5">
            <div>动火施工单位现场负责人签字：{{ obj.constructionUnitUsername }}</div>
            <div v-if="obj.constructionUnitApproval">
              {{ obj.constructionUnitApproval.approvalTime | dateFormat("YYYY 年 MM 月 DD 日 HH 时 mm 分") }}
            </div>
            <div v-else />
          </td>
        </tr>
        <tr>
          <td colspan="5">
            <div>申请动火单位主管部门负责人签字：{{ obj.applyHotUnitUsername }}</div>
            <div v-if="obj.applyHotUnitApproval">
              {{ obj.applyHotUnitApproval.approvalTime | dateFormat("YYYY 年 MM 月 DD 日 HH 时 mm 分") }}
            </div>
            <div v-else />
          </td>
        </tr>
        <tr>
          <td>上级主管部门（特级、一级动火）</td>
          <td>
            <div>生产调度运行部门签字：{{ obj.productionAdminUsername }}</div>
            <div v-if="obj.productionAdminApproval">
              {{ obj.productionAdminApproval.approvalTime | dateFormat("YYYY 年 MM 月 DD 日 HH 时 mm 分") }}
            </div>
            <div v-else />
          </td>
          <td>
            <div>资产设施管理部门签字：{{ obj.assetsAdminUsername }}</div>
            <div v-if="obj.assetsAdminApproval">
              {{ obj.assetsAdminApproval.approvalTime | dateFormat("YYYY 年 MM 月 DD 日 HH 时 mm 分") }}
            </div>
            <div v-else />
          </td>
          <td>
            <div>安全监管部门签字：{{ obj.safetyAdminUsername }}</div>
            <div v-if="obj.safetyAdminApproval">
              {{ obj.safetyAdminApproval.approvalTime | dateFormat("YYYY 年 MM 月 DD 日 HH 时 mm 分") }}
            </div>
            <div v-else />
          </td>
          <td />
        </tr>
        <tr>
          <td>作业批准人（动火现场指挥）</td>
          <td colspan="4">
            <div>
              我已审核过本许可证的相关文件，并确认符合公司动火安全管理规定的要求，同时我与相关人员一同检查过现场并同意动火方案，因此，我同意动火。
            </div>
            <div>
              <span>签字：{{ obj.entAdminUsername }}</span>
              <span v-if="obj.entAdminApproval" style="padding-left: 50px">
                {{ obj.entAdminApproval.approvalTime | dateFormat("YYYY 年 MM 月 DD 日 HH 时 mm 分") }}
              </span>
              <span v-else />
            </div>
          </td>
        </tr>
        <tr v-if="obj.delayInfo">
          <td>延期</td>
          <td>
            本许可证延期从 {{ obj.delayInfo.startTime | dateFormat("YYYY 年 MM 月 DD 日 HH 时 mm 分") }} 到
            {{ obj.delayInfo.endTime | dateFormat("YYYY 年 MM 月 DD 日 HH 时 mm 分") }}
          </td>
          <td>
            <div>申请人：</div>
            <div>{{ obj.delayInfo.username }}</div>
          </td>
          <td>
            <div>相关方：</div>
            <div>{{ obj.delayInfo.relatedUsername }}</div>
          </td>
          <td>
            <div>批准人或现场指挥：</div>
            <div>{{ obj.delayInfo.adminUsername }}</div>
          </td>
        </tr>
        <tr v-if=" obj.closeInfo">
          <td>关闭</td>
          <td>
            动火作业结束后，监护人留守现场，确认无任何火源和隐患后关闭作业。 动火结束时间：{{
              obj.closeInfo.ct | dateFormat("YYYY 年 MM 月 DD 日 HH 时 mm 分")
            }}
          </td>
          <td>
            <div>申请人：</div>
            <div>{{ obj.closeInfo.username }}</div>
          </td>
          <td>
            <div>相关方：</div>
            <div>{{ obj.closeInfo.relatedUsername }}</div>
          </td>
          <td>
            <div>批准人或现场指挥：</div>
            <div>{{ obj.closeInfo.adminUsername }}</div>
          </td>
        </tr>
        <tr v-if="obj.cancelInfo">
          <td>取消</td>
          <td colspan="2">
            <div>因以下原因，此许可证取消：{{ obj.cancelInfo.remark }}</div>
          </td>
          <td colspan="2">
            <div>申请人：{{ obj.cancelInfo.username }}</div>
            <div>相关方：{{ obj.cancelInfo.relatedUsername }}</div>
            <div>批准人或现场指挥：{{ obj.cancelInfo.adminUsername }}</div>
          </td>
        </tr>
        <tr>
          <td colspan="5">
            <div>变动备注栏（填写组织机构人员变动等实际情况）</div>
            <div>{{ obj.remark }}</div>
            <div>
              <span>申请人：{{ obj.username }}</span>
              <span style="padding-left: 100px">批准人：{{ obj.entAdminUsername }}</span>
            </div>
            <div>{{ obj.ct | dateFormat("YYYY 年 MM 月 DD 日 HH 时 mm 分") }}</div>
          </td>
        </tr>
        <tr>
          <td colspan="5">
            注：1.本许可证一式四联：第一联由批准人持有，第二联由基层单位持有，第三联由现场监护人持有，第四联由施工单位现场负责人持有。
          </td>
        </tr>
      </table>
    </div>

    <span slot="footer" class="dialog-footer">
      <el-button @click="dialog = false">取 消</el-button>
      <el-button v-print="{
          id: 'printMe',
          popTitle: ''
        }" type="primary">打 印</el-button>
    </span>
  </el-dialog>
</template>

<script>
  import {
    postHandle
  } from '@/api'
  import {
    imgPath
  } from '@/filters'
  import FileType from '@/components/Crud/components/fileType'
  import {
    mixin
  } from './hotTicket'
  export default {
    components: {
      FileType
    },
    mixins: [mixin],
    data() {
      return {
        dialog: false,
        obj: {
          hotGasDetectList: [],
          delayInfo: {},
          cancelInfo: {},
          closeInfo: {}
        }
      }
    },
    methods: {
      // 详情
      getObjectId(id) {
        postHandle(`/api/v1/welder-sbtx-second/hot-ticket-comb/show/${id}`).then(res => {
          this.obj = res.result
          let {
            hotWorkType,
            harmType,
            licenseImplement,
            safetyType
          } = this.obj
          this.obj.hotWorkType = hotWorkType.split(',')
          this.obj.harmType = harmType.split(',')
          this.obj.licenseImplement = licenseImplement.split(',')
          this.obj.safetyType = safetyType.split(',')
        })
      },
      getSrcList(str) {
        let arr = []
        if (str) {
          arr = str.split(';')
        }
        return arr.map(item => imgPath(item))
      },
      dialogClose() {}
    }
  }
</script>

<style lang="less" scoped>
  .title {
    text-align: center;
    border: none;
    margin-bottom: 20px;
  }

  .number {
    text-align: right;
    border: none;
    width: 95%;
    margin-bottom: 20px;
  }

  table {
    border-collapse: collapse;
    width: 100%;
    border: 1px solid;
    text-align: left;

    td {
      line-height: 18px;
      border: 1px solid;
      padding: 7px;
    }

    td:nth-child(odd) {
      width: 20%;
    }
  }

  .hot-gas-detect {
    td:nth-child(1) {
      width: 16%;
    }

    td:nth-child(odd) {
      width: initial;
    }

    td:not(:nth-child(1)) {
      width: 14%;
    }
  }

  .hot-gas-detect+table {
    td:nth-child(odd) {
      width: initial;
    }

    td {
      width: 20%;
    }
  }

  .image {
    width: 100px;
    height: 100px;
  }

  .padding10 {
    padding-right: 50px;
  }
</style>